<html>
<head>
    <title>Social button</title>

    <link rel="stylesheet" href="css/colors/yellow.css">
</head>
<body>
<div class="social-wrap a">
    <button id="facebook">Sign in with Facebook</button>
    <button id="twitter">Sign in with Twitter</button>
    <button id="googleplus">Sign in with Google</button>
    <ul class="sm-wrap">
        <li id="facebook-sm"><a href="#"> Share on Facebook </a></li>
        <li id="twitter-sm"><a href="#">Share on Twitter </a></li>
        <li id="gplus-sm"><a href="#">Share on Google Plus </a></li>
</div>
</div>
<hr>
<div class="social-wrap b">
    <button class="facebook">Sign in <em>w/</em> Facebook</button>
    <button class="twitter">Sign in <em>w/</em> Twitter</button>
    <button class="googleplus">Sign in <em>w/</em> Google</button>
</div>
<hr>
<div class="social-wrap c">
    <button class="facebook">Sign in <em>w/</em> Facebook</button>
    <button class="twitter">Sign in <em>w/</em> Twitter</button>
    <button class="googleplus">Sign in <em>w/</em> Google</button>
</div>
</body>
</html>